<style scoped>

</style>

<template>
<div ref="chart" style="width: 350px; height: 200px;"></div>
</template>
<script setup>
import {ref} from 'vue'
import * as echarts from 'echarts'
const chart = ref(null)
import request5151 from "../../utils/request5151.js";
const getData = () => {
  request5151({
    url:'/dormitoryallocation/RoomOfStudentCount',
    method:'get',
  }).then((res) => {
   const data = res.data.data
    const echartInstance = echarts.init(chart.value)
    const option = {
      title: {
        text: '宿舍楼人数',
        subtext: '人数',
        left: 'center',
        textStyle: {
          color: 'yellow',
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      xAxis: {
        type: 'category',
        data: data.map(dp => dp.location.substring(9))
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'bar',//line折线图
        barWidth: '40%',
        data: data.map(dp => dp.total)
      }]
    }
    echartInstance.setOption(option)
  })
}
getData()
</script>
